<template>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      :showCancel="true"
      @close="dialogConfig.show = false"
      width="70%"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="80px"
        @submit.prevent
      >
        <el-form-item label="标题" prop="title">
          <el-input :maxLength="10" v-model="formData.title" />
        </el-form-item>

        <el-form-item label="摘要" prop="sumary">
          <el-input :maxLength="500"
          v-model="formData.summary"
          type="textarea"
          show-word-limit />
        </el-form-item>

        <el-form-item
              label="标签"
              prop="tags"
              label-width="100px"
            >
              <div>
            <el-tag
              v-for="(tag, index) in dynamicTags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
              style="margin-left: 3px;"
            >
              {{ tag }}
            </el-tag>
            <el-input
              placeholder="请输入标签信息"
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+标签信息</el-button>
            </div>
            </el-form-item>

          <el-form-item label="分类" prop="categoryId">
            <CategorySelect
            v-model="formData.categoryId"
            >
          </CategorySelect>
        </el-form-item>

        <!-- 单选 -->
        <el-form-item label="封面类型" prop="coverType">
          <el-radio-group v-model="formData.coverType">
            <el-radio :label="0">无封面</el-radio>
            <el-radio :label="1">横幅</el-radio>
            <el-radio :label="2">图标</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="封面"
          prop="coverPath"
          v-if="formData.coverType && formData.coverType != 0"
        >
          <CoverUpload
            v-if="formData.coverType == 1"
            v-model="formData.coverPath"
            :width="330"
            :height="180"
            :type="2"
          ></CoverUpload>
          <CoverUpload
            v-if="formData.coverType == 2"
            v-model="formData.coverPath"
            :width="100"
            :height="100"
            :type="3"
          ></CoverUpload>
        </el-form-item>
        <el-form-item label="分享内容" prop="content">
          <SunEditor v-model="formData.content"></SunEditor>
        </el-form-item>
      </el-form>
    </Dialog>
  </template>

  <script setup>
  import { ref, reactive, getCurrentInstance, nextTick } from "vue";
  const { proxy } = getCurrentInstance();

  const api = {
    saveShare: "/post/savePosts",
  };

  const dialogConfig = ref({
    show: false,
    title: "编辑知识分享",
    buttons: [
      {
        type: "primary",
        text: "确定",
        click: (e) => {
          submitForm();
        },
      },
    ],
  });

  const formData = ref({});
  const formDataRef = ref();

  const rules = {
    title: [{ required: true, message: "请输入标题" }],
    coverType: [{ required: true, message: "请选择封面类型" }],
    coverPath: [{ required: true, message: "请选择封面" }],
    content: [{ required: true, message: "请输入内容" }],
    categoryId: [{ required: true, message: "请选择文章分类" }],

  };

  const showEdit = (data) => {
    dialogConfig.value.show = true;
    nextTick(() => {
      formDataRef.value.resetFields();
      formData.value = Object.assign({}, data || {});
    });
  };

  defineExpose({
    showEdit,
  });

  const emit = defineEmits(["reload"]);
  const submitForm = async () => {
    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }
      let params = {};
      Object.assign(params, formData.value);

      let result = await proxy.Request({
        url: api.saveShare,
        params,
      });
      if (!result) {
        return;
      }
      dialogConfig.value.show = false;
      proxy.Message.success("保存成功");
      emit("reload");
    });
  };


  const dynamicTags = ref(['eg:文学']);
        const inputVisible = ref(false);
        const inputValue = ref('');
        const saveTagInput = ref(null);

        const handleClose = (tag) => {
          dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
        };

        const showInput = () => {
          inputVisible.value = true;
          nextTick(() => {
            saveTagInput.value.input.focus();
          });
        };

        const handleInputConfirm = () => {
          if (inputValue.value) {
            dynamicTags.value.push(inputValue.value);
          }
          inputVisible.value = false;
          inputValue.value = '';
        };

  </script>

  <style lang="scss" scoped>
  </style>
